<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="{{ asset('admin') }}/lib/html5shiv.js"></script>
<script type="text/javascript" src="{{ asset('admin') }}/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="{{ asset('admin') }}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('admin') }}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('admin') }}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('admin') }}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="{{ asset('admin') }}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="{{ asset('admin') }}/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script type="text/javascript" src="{{ asset('admin') }}/lib/webuploader/0.1.5/webuploader.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>新增图片</title>
{{-- webuploader插件 --}}
<link rel="stylesheet" href="{{ asset('admin') }}/lib/webuploader/0.1.5/webuploader.css" />
<article class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-add-subject">
		{{ csrf_field() }}
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>学科名称：</label>
			<div class="formControls col-xs-4 col-sm-6">
				<input type="text" class="input-text" name="subject_name" id="subject_name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>logo：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="hidden" name="logo">
				<!--定义一个标签用来存放图片的预览图-->
				<div id="preview" class="uploader-list"></div>
				<!-- progress 是h-ui框架内置的进度条组件  http://www.h-ui.net/Hui-4.9-progress.shtml -->
				<div id="processing" style="margin: 10px 0px;">
					<div class="progress" style="width: 500px;">
						<span class="progress-bar">
							<span class="sr-only" style="width: 0%"></span>
						</span>
					</div>
				</div>
				<div id="logo">选择图片</div>
				<div id="uploader" class="btn btn-primary radius">开始上传</div>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;保存&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="{{ asset('admin') }}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('admin') }}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="{{ asset('admin') }}/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="{{ asset('admin') }}/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script src="{{ asset('admin') }}/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script src="{{ asset('admin') }}/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script src="{{ asset('admin') }}/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script src="{{ asset('admin') }}/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script>
// webuploader插件初始化
var uploader = WebUploader.create({
  // 配置项: 值,
  // 是否开启文件自动上传
  auto: false,
  // 引入flash文件，主要为了兼容不支持html5的低版本浏览器
  swf: "{{ asset('admin') }}/lib/webuploader/0.1.5/Uploader.swf",
  // 设置文件上传的标签
  pick: '#logo',
  // 是否开启图片压缩上传
  resize: false,
  // 设置允许上传的文件格式
  accept: {
    extensions: 'gif,jpg,jpeg,png',
	},
	// 上传文件的name值
	fileVal: 'logo', 
	// 设置文件上传处理的url地址
	server: "{{url('/admin/upload/logo')}}",
	// 附带csrf的token令牌
	formData: {
		'_token': '{{ csrf_token() }}',
	}
});

// 点击上传文件
$('#uploader').on('click',function(){
	uploader.upload();
});

// 文件上传预览
uploader.on('fileQueued', function(file) {
    uploader.makeThumb(file, function(error, src) {
        if (error) {
            layer.msg("不能预览图片。");
            return;
        }
        $('#processing .sr-only').css('width', '0%');
        $('#preview').html("<img src='" + src +"' />");
    }, 100, 100);
});

// 文件上传进度
uploader.on('uploadProgress', function(file, percentage) {
    $('#processing .sr-only').css('width', percentage * 100 + '%');
});

// 接收webuploader上传文件以后服务器返回的信息
uploader.on( 'uploadSuccess', function( file, msg ) {
    $( '#'+file.id ).addClass('upload-state-done');
 		// 把服务器返回的图片地址保存到隐藏域
    $('input[name=logo]').val( msg.file );
});

$(function(){
	$("#form-add-subject").validate({
		rules:{
			subject_name:{
				required:true,
				maxlength:16
			},
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			$(form).ajaxSubmit(function(msg){  // jQueryForm插件 
				if( msg.status == 'SUCCESS' ){				
					// 提示
					layer.msg('添加成功！',{icon:1,time:3000},function(){
						// 父级刷新，重新到数据库获取数据
						parent.location.reload();
						// 把当前弹窗关闭
						var index = parent.layer.getFrameIndex(window.name);
						parent.$('.btn-refresh').click();
						parent.layer.close(index);
					});
				}else{
					layer.msg(msg.error[0],{icon:2,time:3000});
				}
			});
		}
	});
});
</script>
